@charset "utf-8";
/************** 变量定义部分 **************/
:root {
    /* 主要内容宽度 */
    --mainWidth: 960px;
    /* 主题色 */
    --themeColor: #f30808;
}

/************** 统一元素样式部分 **************/
* {
    box-sizing: border-box;
}
html {
    font: 16px 'Comic Sans MS','Lucida Sans Unicode',Arial,sans-serif;
    color: #3d3d3d;
}
input,button {
    font: inherit;
}
button,
a,
input[type="checkbox"] {
    cursor: pointer;
}
input:disabled {
    cursor: not-allowed;
}

/************** 元素细节样式部分 **************/

/* 按钮组容器 */
.btn-group {
    width: var(--mainWidth);
    margin: 10px auto;
}

/* 商品信息表格 */
.table-goods-info {
    width: var(--mainWidth);
    border-collapse: collapse;
    margin: 10px auto;
    table-layout: fixed;
}
.table-goods-info tr:nth-child(even) {
    background-color: #fff1f1;
}
.table-goods-info th, 
.table-goods-info td {
    padding: 6px 10px;
    border: 1px solid #cfc5c5;
    text-align: left;
}
.table-goods-info th:first-child, 
.table-goods-info td:first-child {
    text-align: center;
}
/* 表格选择框列表头 */
.table-goods-info th:first-child {
    width: 48px;
}
/* 表格商品名称列表头 */
.table-goods-info th:nth-child(3) {
    width: 198px;
}
/* 表格的操作列表头 */
.table-goods-info th:last-child {
    width: 96px;
}
/* 表格选择框列头 */
.table-goods-info th:first-child input,
.table-goods-info td:first-child input {
    width: 16px;
    height: 16px;
}
/* 表格操作列 */
.table-goods-info td.ctrl-colum a {
    margin-right: 5px;
}
.table-goods-info td.ctrl-colum a:last-child {
    margin-right: 0;
}
.table-goods-info td.ctrl-colum .detail {
    color: #1195bd;
}
.table-goods-info td.ctrl-colum .detail:hover {
    color: #32bee9;
}
.table-goods-info td.ctrl-colum .delete {
    color: #df4234;
}
.table-goods-info td.ctrl-colum .delete:hover {
    color: #fc7a6e;
}
.table-goods-info thead {
    background-color: var(--themeColor);
    color: #ffffff;
}